<template>
  <div class="content_left">
    <a-button @click="paintOn">
      尺子
    </a-button>
  </div>
</template>
<script>
import { Button } from 'ant-design-vue';
import Konva from 'konva';
import { mapState, mapMutations} from 'vuex';
export default ({
  components:{
    AButton: Button
  },
  inject: ['pageStage', 'pageLayer'],
  data() {
    return {
      
    }
  },
  computed: mapState({ circle: state => state.circle }),
  methods: {
    ...mapMutations(['changeClassName']),
    // 渲染文字函数
    writeMessage(message, text, layer) {
      text.text(message);
      layer.draw();
    },
    paintOn() {
      const that = this;
      this.changeClassName({className: 'Ruler'})
      const stage = this.pageStage.value;
      const layer = this.pageLayer.value;
      // 切换工具之后  清除之前的所有监听
      stage.off();
      stage.on('contextmenu',function(e) {
        e.evt.preventDefault();
        return;
      })
      let NowSelectValue = '';
      // 定义文字的属性
      let text = new Konva.Text({
        x: 10,
        y: 10,
        fontFamily: 'Calibri',
        fontSize: 24,
        text: '',
        fill: 'black',
        name: 'changeClear'
      });
      stage.on('mousemove touchmove',function(e) {
        // 当划过表格时候与当前选中的进行匹配
        if(e.target._id === stage._id) {
          stage.container().style.cursor = 'default';
          if(NowSelectValue !== ''){
            NowSelectValue.stroke('#a9a9a9')
            layer.batchDraw()
          }
          return
        }
        if(e.target.className === 'Arrow') {
          NowSelectValue = e.target
          // 滑动到线段时候使鼠标变换样式
          stage.container().style.cursor = 'pointer';
          // 循环所有的线段 将当前选中的线段颜色变成橙色  否则恢复原来的颜色
          stage.find('Arrow').map((item) => {
            if(item._id === NowSelectValue._id) {
              item.stroke('#ffa500')
              let a = Math.abs(item.attrs.points[0]);
              let b = Math.abs(item.attrs.points[1]);
              let c = Math.abs(item.attrs.points[2]);
              let d = Math.abs(item.attrs.points[3]);
              // 将选中的线段的长度进行展示
              that.writeMessage(`长度:${Math.sqrt( (c-a) * (c-a) + (d-b) * (d-b) ).toFixed(2)}mm`, text, layer)
              layer.batchDraw()
            }else{
              item.stroke('#a9a9a9')
              layer.batchDraw()
            }
          })
        }
      })
    }
  }
})
</script>

<style scoped lang="less">

</style>
